<template>
  <div>
    <div class="app_card pt-4  pb-5">
      <el-table v-loading="loading" element-loading-text="查询中..." stripe size="large" :data="dataOfTable"
        height="calc(100vh - 240px)">

        <el-table-column label="门锁ID" prop="lockID" align="center" width="200">
          <template #default="scope">{{ scope.row.lockID }}</template>
        </el-table-column>
        <el-table-column label="房间编码" prop="unitNo" align="center" width="200">
          <template #default="scope">{{ scope.row.unitNo }}</template>
        </el-table-column>
        <el-table-column label="房间名" prop="roomName" align="center" width="600">
          <template #default="scope">{{ scope.row.roomName }}</template>
        </el-table-column>
        <el-table-column label="用户" prop="peopleName" align="center">
          <template #default="scope">{{ scope.row.peopleName }}</template>
        </el-table-column>
        <el-table-column label="物理卡ID" prop="cardMacID" align="center">
          <template #default="scope">{{ scope.row.cardMacID }}</template>
        </el-table-column>
        <el-table-column label="开门方式" prop="openType" align="center">
          <template #default="scope">
            <p v-if="scope.row.openType == 0">钥匙</p>
            <p v-if="scope.row.openType == 1">有效卡</p>
            <p v-if="scope.row.openType == 2">密码</p>
            <p v-if="scope.row.openType == 3">指纹</p>
            <p v-if="scope.row.openType == 4">无效卡</p>
            <p v-if="scope.row.openType == 5">扫码</p>
            <p v-if="scope.row.openType == 6">远程开门</p>
            <p v-if="scope.row.openType == 7">无效指纹</p>
            <p v-if="scope.row.openType == 8">无效密码</p>
            <p v-if="scope.row.openType == 9">无效二维码</p>
            <p v-if="scope.row.openType == 13">有效人脸</p>
          </template>
        </el-table-column>
        <el-table-column label="开锁时间" prop="date" align="center">
          <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>

      </el-table>
      <Pagination ref="paginationRef" @handleChange="handleChange" />

    </div>

  </div>
</template>

<script setup>
/**
 * 刷卡日志
 */
import { ref, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import Pagination from '@/components/pagination/index.vue';

//组件

// ======================================================
//                      变量声明
// ======================================================






const loading = ref(false);

// 表格数据
const dataOfTable = ref([]);

const paginationRef = ref(null);

// 表格查询参数
const queryParam = ref({
  sort: "time",
  order: "desc",
  page: 1,
  limit: 10
})



// ======================================================
//                      处理事件
// ======================================================

// 处理分页尺寸
const handleChange = (data = null) => {
  queryParam.value.page = data?.page;
  queryParam.value.limit = data?.limit;
  loadData();
}


// ======================================================
//                      处理事件
// ======================================================
const loadData = () => {
  let _queryParam = queryParam.value
  _queryParam.offset = (_queryParam.page - 1) * _queryParam.limit || 0;
  loading.value = true

  EsAjax.post(ApiUrls.smartlockLog, { ..._queryParam }).then(res => {
    if (res.data.code != 200) {
      ElMessage.warning(res.data.data + res.data.msg);
      return;
    }
    let { list, totalCount } = res.data.data
    dataOfTable.value = list;
    paginationRef.value?.changeTotal({ totalCount: totalCount })
  }).catch(err => {
    ElMessage.error(err.message);
  }).finally(() => {
    loading.value = false
  })
}

onMounted(() => {
  loadData();
})

</script>
<style lang="less" scoped></style>
  
